<template>
    <h2 class="title">我的公司</h2>
    <div class="company-info">
        <company-card v-for="(company, index) in companyList" :companySimple="company" :key="company.id"></company-card>
        <n-card title="录入" hoverable @click="registerCompany">
            <n-icon size="40">
                <svg-icon name="input" color="#18a058"></svg-icon>
            </n-icon>
        </n-card>
    </div>
</template>

<script setup>
import CompanyCard from "./components/CompanyCard";
import { getCompanySimpleInfoAPI } from "@/http/api/company";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter()
const companyList = ref([])

function getCompanyList() {
    getCompanySimpleInfoAPI().then(res => {
        companyList.value = res.result;
    })
}

function registerCompany() {
    router.push({ name: 'REGISTERCOMPANY' })
}

onMounted(() => {
    getCompanyList();
})
</script>
<style lang="scss" scoped>
.title {
    font-size: 26px;
    font-weight: bold;
}

.company-info {
    min-height: 90%;
    box-sizing: border-box;
    margin: 20px 0px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.n-card {
    width: 250px;
    height: 350px;
    margin: 0px 20px 20px 0px;
    cursor: pointer;
    ::v-deep(.n-card__content) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
</style>